<template>
    <div class="xc-container" v-resizeob="resizeEcharts">
        <div class="top">
            <cards class="one" title="7日内未开机">
                <div id="echarts_2" class="pro-charts"></div>
            </cards>
            <cards class="two" title="未开机数量TOP5">
                <div id="echarts_1" class="pro-charts"></div>
            </cards>
        </div>
        <div class="down">
            <div class="three">
                <div class="header">
                    <div class="title">
                        <img src="~@/assets/screen/card_icon.png" alt="">
                        7日内未开机
                    </div>
                </div>
                <div class="con">
                    <el-table :data="tableData" style="width: 100%;" height="100%" :highlight-current-row="false"
                        :header-cell-style="{
        color: '#fff',
        background: '#0a3370',
        fontWeight: '700',
    }" :row-class-name="tableRowClassName">

                        <el-table-column prop="productId" label="产品序列号" width="240" align="center">
                        </el-table-column>
                        <el-table-column prop="productName" label="产品名称" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="所在区县" align="center">
                        </el-table-column>
                        <el-table-column prop="unitName" label="单位名称" align="center">
                        </el-table-column>
                        <el-table-column prop="userDepartment" label="使用部门" align="center">
                        </el-table-column>
                        <el-table-column prop="userPer" label="设备负责人" align="center">
                        </el-table-column>
                        <el-table-column prop="manufacturerName" label="厂商名称" align="center">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            tableData: [{
                productId: 'W207DL13522206080004',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '党委',
                userPer: '张老师',
                manufacturerName: '北方自动控制技术研究所',
            }, {
                productId: 'W207DL13522206080004',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '党委',
                userPer: '张老师',
                manufacturerName: '北方自动控制技术研究所',
            },
            {
                productId: 'W207DL13522206080004',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '党委',
                userPer: '张老师',
                manufacturerName: '北方自动控制技术研究所',
            },
            {
                productId: 'W207DL13522206080004',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '党委',
                userPer: '张老师',
                manufacturerName: '北方自动控制技术研究所',
            },
            {
                productId: 'W207DL13522206080004',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '党委',
                userPer: '张老师',
                manufacturerName: '北方自动控制技术研究所',
            },
            {
                productId: 'W207DL13522206080004',
                productName: '台式计算机',
                address: '沁县',
                unitName: '交口小学',
                userDepartment: '党委',
                userPer: '张老师',
                manufacturerName: '北方自动控制技术研究所',
            }],
        };
    },
    mounted() {
        // 7日内未开机
        this.myChart2 = echarts.init(document.getElementById("echarts_2"));
        var option2 = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: false,
                axisLabel: {
                    textStyle: {
                        color: '#969a9e',
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: "#243e5d",
                    },
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#243e5d'
                    }
                }
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    color: '#3d90e8'
                }
            ]
        }
        option2 && this.myChart2.setOption(option2)
        // 未开机数量
        this.myChart1 = echarts.init(document.getElementById("echarts_1"));
        var option1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['产品数量'],
                top: 'bottom',
                textStyle: {
                    color: '#f2f2f2',
                    fontWeight: 'normal'
                }
            },
            grid: {
                show: false, //是否显示直角坐标系网格
                top: "10%", // 一下数值可为百分比也可为具体像素值
                bottom: "15%",
                left: "10%",
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#243e5d'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['鼠标', '网卡', '通信', '内存', '办公', '其他', '显卡', 'cpu', '硬盘', '键盘'],
                axisLine: {
                    lineStyle: {
                        color: "#243e5d",
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: '#969a9e',
                    },
                },
                axisTick: {
                    show: false,
                }
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: [4, 3, 1, 3, 4, 4, 5, 10, 11, 3, 5, 7],
                    color: '#3d90e8'
                },
            ]
        };
        option1 && this.myChart1.setOption(option1)

    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return "";
            } else {
                return "warning-row";
            }
        },
        resizeEcharts() {
            this.myChart1.resize()
        },
    }
};
</script>

<style lang='less' scoped>
.xc-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1%;

    .top {
        display: flex;
        gap: 1%;
        width: 100%;
        height: 50%;

        .one,
        .two {
            width: 49%;
            height: 100%;

            .pro-charts {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 5px;
            }
        }
    }

    .down {
        width: 100%;
        height: 50%;

        .three {
            width: 100%;
            height: 100%;

            .header {
                width: 100%;
                height: 36px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                padding-left: 10px;
                color: #fff;
                background: url('~@/assets/screen/b1.png') no-repeat;
                background-size: 100% 100%;

                .title {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                }
            }

            .con {
                width: 100%;
                height: calc(100% - 36px);
                box-sizing: border-box;
                padding: 0 10px;
                background: url('~@/assets/screen/b2.png') no-repeat;
                background-size: 100% 100%;
            }
        }
    }
}

// 表格部分样式
// 最外层透明
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
    color: #93dcfe;
    font-size: 24px;
}

::v-deep .el-table th {
    border: 0;
}

::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: 0px !important;
}

// 表格内背景颜色 
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
    border: 0px;
    color: #afcbf1;
    font-size: 16px;
    height: 5px;
    font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
    font-weight: Normal;
}

// 去掉最下面的那一条线 
.el-table::before {
    height: 0px;
}

// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
    padding: 0;
    height: 40px;
}

// 修改高亮当前行颜色
::v-deep .el-table tbody tr:hover>td {
    background: #063570 !important;
}

// 取消当前行高亮
// ::v-deep .el-table tbody tr {
//   pointer-events: none;
// }

// 修改表头样式-加边框
::v-deep .el-table__header-wrapper {
    // border: solid 1px #04c2ed;
    // box-sizing: border-box;
}

// 表格斑马自定义颜色
::v-deep .el-table__row.warning-row {
    background: #063570;
}

// 滚动条样式
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #063570;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    opacity: 0.5;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-color: #0257aa;
}
</style>